<template>
  <el-table
    :data="tableData.filter(data => !search || data.fname.toLowerCase().includes(search.toLowerCase()))"
    style="width: 100%"
    height=780
    border>
    <el-table-column
      label="菜品ID"
      prop="fid">
    </el-table-column>
    <el-table-column
      label="菜品名称"
      prop="fname">
    </el-table-column>
    <el-table-column
      label="菜品描述"
      prop="fdesc">
    </el-table-column>
    <el-table-column
      label="价格"
      prop="price">
    </el-table-column>
    <el-table-column prop="image" label="图片" width="120">
      <template slot-scope="scope">
        <el-image
          style="width: 100px; height: 100px"
          :src="scope.row.image"
          fit="fill"></el-image>
      </template>
    </el-table-column>

    <el-table-column
      align="right">
      <template slot="header" slot-scope="scope">
        <el-input
          v-model="search"
          size="mini"
          placeholder="输入关键字搜索"/>
      </template>

      <template slot-scope="scope">

        <el-button size="mini" type="primary" @click="toCart(scope.row)">加入购物车</el-button>

      </template>

    </el-table-column>

  </el-table>
</template>

<script>
  import axios from "axios";

  export default {
    data() {
      return {
        tableData: [
          {
            fid: '',
            fname: '',
            fdesc: '',
            price: '',
            image: '',
          },
        ],
        search: '',
      }
    },
    mounted() {
      let sid = this.$route.params.sid
      // alert(sid)
      this.selectFoodBySid(sid);

    },

    methods: {

      selectFoodBySid(sid) {
        axios.get("/api/selectFoodBySid/" + sid).then(res => {
          this.tableData = res.data;
        })
      },


      toCart:function(id){

        alert(id.fid)

        // this.$router.push("/foodUpdate/"+id)

      },

      //
      // handleDelete(index, row) {
      //   console.log(index, row);
      // },
      //
      //
      // handleDelete: function (fid) {
      //
      //   if(confirm("你确认删除该条目吗？？？") == true){
      //
      //     axios.post("/api/deleteFoodById/" + fid).then(res => {
      //
      //       if(res.data == "1"){
      //         this.$router.go(0)
      //       }else{
      //         alert("删除失败！！！");
      //       }
      //     });
      //   }else{
      //     this.$router.push("/foodsList/")
      //   }
      // }
    },
  }
</script>


